<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #right{width:200px;height:500px;background-color: greenyellow;}
    #left{width:200px;height:500px;background-color: blue;}
    #center{width:100%;height:500px;background-color: purple;}
    /* 第1步: 三个容器同时设置浮动  - 在一行排列
      放不下  left和right 掉下去
    */
    #center,#left,#right{float:left}

    /*  第2步 给父容器加内填充 -  放left和right 2个容器*/
    #parent{padding:0 200px;}

    /* 第3步: 把left移动到原本的位置  -  left 在center（100%）的前面
              把right移动到原本的位置 -  right 在center的后面
       技巧: margin负值  -  移动  
             定位方位    -  移动       
    */
    #left{margin-left:-100%;position: relative;left:-200px;}
    #right{margin-left:-200px;position: relative;right:-200px;}

  </style>
</head>

<body>
  <div id="parent">
    <div id="center">中间</div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </div>
</body>
</html>